<!--
 * @Description:
 * @Version: 2.0
 * @Autor: 黄康辉
 * @Date: 2021-10-28 16:04:51
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-24 19:10:28
-->
<template>
  <div
    class="z-w-100 flex app-wrapper"
  >
    <sidebar
      v-if="!$route.path.includes('login')"
      class="sidebar-container"
    />
    <router-view v-if="!isOtherUrl" />
    <AppMain v-show="isOtherUrl">
      <template slot="content">
        <div
          id="vue"
          class="z-w-100"
        />
        <div
          id="react"
          class="z-w-100"
        />
      </template>
    </AppMain>
  </div>
</template>

<script>
import Sidebar from '@/layout/components/Sidebar/index.vue'
import { registerMicroApps, start } from 'qiankun'
import { mapGetters } from 'vuex'
import { initialState } from './qiankun/globalState'
import AppMain from '@/layout/components/AppMain.vue'
export default {
  components: {
    Sidebar,
    AppMain
  },
  data () {
    return {
      apps: []
    }
  },
  computed: {
    ...mapGetters(['menuData']),
    isOtherUrl () {
      return this.$route.meta.cilentType !== '0'
    }
  },
  watch: {
    menuData (nVal) {
      if (nVal.length > 0) {
        this.apps = [...this.mapClientData(nVal, '1'), ...this.mapClientData(nVal, '2')]
        registerMicroApps(this.apps)
        start({
          sandbox: { strictStyleIsolation: true }, // 可选，是否开启沙箱，默认为 true。// 从而确保微应用的样式不会对全局造成影响。
          singular: true // 可选，是否为单实例场景，单实例指的是同一时间只会渲染一个微应用。默认为 true。
        })
      }
    }
  },
  methods: {
    mapClientData (data, type) {
      const mapClient = {
        1: 'vue',
        2: 'react'
      }
      return data.filter(v => v.cilentType === type).map(s => {
        const json = {
          name: s.path,
          entry: s.componentPath,
          container: `#${mapClient[type]}`,
          activeRule: `/${s.path}`,
          props: {
            globalState: initialState
          }
        }
        return json
      })
    }
  }
}

</script>

<style lang="scss">

</style>
